<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>订单</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">
</head>
<style>
    .myfooter {
        margin-top: 60px;
        background-color: #000000;
    }

    .myli {
        font-size: 45px;
        color: #FF5722;
        margin-top: 20px;
        margin-right: 10px;
    }

    .layui-inline, img {
        display: inline-block;
    }
</style>

<body>
<!-- start header -->
<header>
    <div class="top center">

        <div class="right fr">
            <div class="gouwuche fr">
                <a href="/user/userInfo">个人中心</a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--header-------------->
<!-- top2 search-->
<div class="banner_x center">
    <a href="{{ url_for('user.index') }}" taget="_blank">
        <i class="layui-icon layui-icon-home fl myli"></i>
    </a>
    <div class="nav fl">
        <ul style="margin-left:50px;">
            <li><a href="/user/itemList/手机">手机</a></li>
            <li><a href="/user/itemList/电脑平板">电脑平板</a></li>
            <li><a href="/user/itemList/服饰鞋包">服饰鞋包</a></li>
            <li><a href="/user/itemList/二手书籍">二手书籍</a></li>
            <li><a href="/user/itemList/家居家电">家居家电</a></li>
            <li><a href="/user/itemList/生活百货">生活百货</a></li>
            <li><a href="/user/itemList/健身器材">健身器材</a></li>
            <li><a href="/user/itemList/智能硬件">智能硬件</a></li>
            <li><a href="/user/itemList/其他">其他</a></li>
        </ul>
    </div>
    <!--search 框-->
    <div class="search fr">
        <form action="" method="post">
            <div class="text fl">
                <input type="text" class="shuru" placeholder="请输入需要的商品">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<!-- top2 -->

<!-- 左侧导航 -->
<div class="grzxbj" style="margin-top: 10px;">
    <div class="selfinfo center">
        <div class="lfnav fl">
            <div class="ddzx">
                <p><b>订单中心</b></p>
            </div>
            <div class="subddzx">
                <ul style="margin-left: 5px;">
                    <li>
                        <a href="{{ url_for('user.order') }}" style="color:#ff6700;font-weight:bold;">我的订单</a>
                    </li>
                </ul>
            </div>
            <div class="ddzx">
                <p><b>个人中心</b></p>
            </div>
            <div class="subddzx">
                <ul style="margin-left: 5px;">
                    <li>
                        <a href="./self_info.html">个人信息</a>
                    </li>
                    <li>
                        <a href="">消息通知</a>
                    </li>
                    <li>
                        <a href="/user/publishedItem">已发布商品</a>
                    </li>
                    <li>
                        <a href="">游览历史</a>
                    </li>
                    <li>
                        <a href="{{ url_for('user.shopCar') }}">购物车</a>
                    </li>
                    <li>
                        <a href="{{ url_for('user.uploadItem') }}">上传商品</a>
                    </li>
                    <li>
                        <a href="{{ url_for('user.logout') }}">退出</a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 左侧导航 -->
        <!--展示订单-->
        <div class="rtcont fr">
            <div class="ddzxbt">交易订单</div>
            <!------------------------>
            <div class="ddxq">
                <div class="ddspt fl"></div>
                <div class="ddbh fl">商品</div>
                <div class="ztxx fr">
                    <ul>
                        <li>商品状态</li>
                        <li>价格</li>
                        <li>下单时间</li>
                        <li>
                            订单详情
                        </li>
                        <li>
                            操作
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!------------------------>
            <div class="ddxq">
                <div class="ddspt fl"><img src="{{item.pic1}}" style="width: 75px;height: 75px" alt=""></div>
                <div class="ddbh fl">{{ item.itemName }}</div>
                <div class="ztxx fr">
                    <ul>
                        <li>价格</li>
                        <li>价格</li>
                        <li>价格</li>
                        <li>
                            <a href="/user/orderInfo/}">订单详情></a>
                        </li>
                        <li>
                            <a href="/user/deleteOrder/">X</a>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="clear"></div>

            </div>
        </div>
        <div class="clear"></div>
        <div>
            <input id="input" type="text"/>
            <input type="button" value="提交" onclick="sendMsg()">
            <input type="button" value="加载历史消息" onclick="loadMsg()">

            <div id="t" style="margin-top: 10px"></div>
        </div>
    </div>
</div>
<!-- self_info -->

<!-- footer -->
<footer class="mt20 center layui-bg-black">

    <div class="copyright">
        <h2>简体 | 繁体 | English | 常见问题</h2></div>
    <div class="copyright">
        <h2>易淘二手商城版权所有-京ICP备10046444-<img src="/static/image/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号</h2>
    </div>
</footer>

<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script>
    $(document).ready(function () {
        namespace = '/abcd';

        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('response', function (res) {

            console.log(res);
            var msg = res.msg;
            var name = res.name;
            var item_id = res.item_id;
            var cur_id ={{ item.item_id}};

            if (msg && cur_id == item_id) {

                $("#t").append("<img src=" + name + " class='pic'>").append(':').append(msg).append('<br/>');
            }
        });
    });

    function loadMsg() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/user/loadMsg/{{ item.item_id }}",
            success: function (result) {
                var data = result.data;
                console.log(result.Code);
                console.log(data);
                var msgs = data.msgs;
                console.log(msgs)

                if (result.Code == 200) {
                    console.log(msgs[0].msg)
                    for (var i = 0; i < msgs.length; i++) {
                        var name = msgs[i].name;
                        var cur_id ={{ item.item_id }};
                        var item_id = msgs[i].item_id;
                        if (cur_id == item_id) {
                            $("#t").append("<img src=" + name + " class='pic'>").append(':').append(msgs[i].msg).append('<br/>');
                        }
                    }
                }
                ;
                if (result.Code == 500) {
                    alert('加载失败！')
                }
                ;
            },
            error: function () {
                console.log("异常！")
            }
        });
    }

    function sendMsg() {
        namespace = '/abcd';
        var msg = $('#input').val();
        var item_id ={{ item.item_id }};
        var data = {'item_id': item_id, 'msg': msg};
        console.log(data)
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function () {
            if (msg) {
                socket.emit('my event', data);
            }
        });
    }
</script>


</body>

</html>